<template>
  <div>
    <a-drawer
      :title="title"
      placement="right"
      :width="width"
      :closable="true"
      @close="onClose"
      :visible="visible"
    >
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="模块名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <div>
            <a-input-search
              placeholder="请输入模块名称"
              v-decorator="['title']"
              disabled
              size="large"
              @search="ChangeDown(options)"
            >
              <a-button slot="enterButton">{{this.Show?"保存":"编辑"}}</a-button>
            </a-input-search>
            <transition
              name="fade"
              enter-active-class="animated slideInLeft"
              leave-active-class="animated slideOutLeft"
              :duration="500"
            >
              <div style="margin-top:5px" v-if="Show">
                <a-input addonBefore="zh" v-model="options.zh" placeholder="请输入中文标题" />
                <a-input addonBefore="mn" v-model="options.mn" placeholder="请输入蒙文标题" />
                <a-input addonBefore="en" v-model="options.en" placeholder="请输入英文标题" />
              </div>
            </transition>
          </div>
        </a-form-item>
        <a-form-item label="颜色" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <div class="selectColor">
            <colorPicker style="margin-right:10px" v-model="selectColor" />
            <a-input
              placeholder="输入颜色"
              size="large"
              v-decorator="['color']"
              @change="ColorInputChange"
            ></a-input>
          </div>
        </a-form-item>
        <a-form-item label="字体大小" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input-number
            :min="1"
            :max="50"
            v-decorator="['fontSize',{rules:[{required:true,message:'请输入字体大小'}]}]"
            style="width:100%"
          />
        </a-form-item> 
        <a-form-item label="图标" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input-search
            placeholder="请选择或输入图标编码"
            v-decorator="['icon',{rules:[{required:true,messgae:'请输入图标或者选择编码'}]}]"
            @search="SelectIcon"
            size="large"
          >
            <a-button slot="enterButton" icon="setting"></a-button>
          </a-input-search>
        </a-form-item>
        <a-form-item label="排序" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input-number style="width:100%" :min="1" v-decorator="['sort']" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit" icon="plus">{{this.title==="新增"?"新增":"修改"}}</a-button>
        </a-form-item>
      </a-form>
    </a-drawer>
    <!-- 图片列表展示 -->
    <a-modal :width="600" centered title="图标列表" v-model="Icon" @ok="chooseIcon">
      <div>
        <a v-for="(item,index) in iconList" @click="chooseASingle(item)" :key="index">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{item}}</span>
            </template>
            <icon-font class="iconfont" :type="item" />
          </a-tooltip>
        </a>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts">
import Setting from "~/utils/setting";
import { Component, Vue, Prop, Emit, Watch } from "vue-property-decorator";
@Component({
  name: "menu-open-drawer",
  layout: "menu"
})
export default class MenuOpen extends Vue {
  @Prop({ type: Boolean, required: true, default: false }) visible!: boolean;
  @Prop({ type: String, required: true, default: "默认" }) title!: string;
  @Prop({ type: Object }) edit!: object;
  width: number = 630;
  iconList: string[] = Setting.iconfont;
  Icon: boolean = false;
  IconSingle: string = "";
  form: any = {};
  Show: boolean = false;
  options: object = {};
  selectColor: string = "#ccc";
  created() {
    this.$nextTick(() => {
      this.form = this.$form.createForm(this);
      const _this = this;
      if (this.title === "新增") {
        this.form.resetFields();
        setTimeout(() => {
          this.form.setFieldsValue({
            ["fontSize"]: 30,
            ["sort"]: 1,
            ["color"]: _this.selectColor
          });
        }, 0);
        this.options = {};
      } else {
        const item: any = this.edit;
        const resultTitle: string = JSON.stringify(item.title);
        setTimeout(() => {
          this.form.setFieldsValue({
            ["fontSize"]: item.fontSize,
            ["sort"]: item.sort,
            ["color"]: item.color,
            ["title"]: resultTitle,
            ["icon"]: item.icon
          });
          this.options = JSON.parse(resultTitle);
        }, 1000);
      }
    });
  }
  handleSubmit(e) {
    e.preventDefault();
    this.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
        this.Submit(values);
      }
    });
  }
  //菜单标题
  ChangeDown(val: object) {
    this.form.setFieldsValue({ ["title"]: JSON.stringify(val) });
    this.Show = !this.Show;
  }
  //图标选择
  SelectIcon() {
    this.Icon = true;
  }
  //图片列表点击确定
  chooseIcon() {
    this.form.setFieldsValue({ ["icon"]: this.IconSingle });
    this.Icon = false;
  }
  chooseASingle(val: string) {
    this.IconSingle = val;
    this.$message.success(`选择: ${val}`);
  }
  ColorInputChange(val: any) {
    this.selectColor = val.target.value;
  }
  headleChangeColor(val) {
  }
  @Watch("selectColor")
  newSelectColor(n: string, o: string) {
    this.form.setFieldsValue({ ["color"]: n });
  }
  @Emit("onClose")
  onClose() {}
  //表单提交
  @Emit("Submit")
  Submit(n: object) {}
}
</script>
<style lang="less" scoped>
.iconfont {
  font-size: 30px;
  width: 50px;
  margin-top: 20px;
  margin-right: 10px;
}
.selectColor {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-content: center;
}
</style>